<template>
  <div class="map-box relative-position q-mb-lg" itemscop itemtype="http://schema.org/Map">
    <div class="map-box-img shadow-light cursor-pointer"
         @mouseenter="setHover(true)">
      <a
        @click.prevent="toMap(map.id)"
        :href="'/map/'+map.id + '/'"
        itemprop="contentUrl"
        class="bg-img-center"
        :style="{backgroundImage: 'url('+ imgUrl(map.thumbnail) +')'}">
        <img class="hidden" itemprop="thumbnail" :src="imgUrl(map.thumbnail)" width="100%" height="auto" :alt="map.name">
        <q-chip v-if="map.is_lock" dense color="negative" square class="q-ml-xs q-mt-xs lock-label">锁定</q-chip>
        <!--<div v-if="summary && hover" class="map-summary size-14 q-pa-md text-white text-shadow-dark">-->
            <!--<div>{{ map.summary.slice(0, 160) }}</div>-->
        <!--</div>-->
      </a>
    </div>
    <div class="row  cursor-pointer">
      <div class="col q-pr-md">
        <a :href="'/map/'+map.id + '/'" @click.prevent="toMap(map.id)">
          <h3 class="text-grey-9 size-16 map-name ellipsis" :class="{'bold': !simple}" itemprop="name">{{ map.name }}</h3>
        </a>
      </div>
      <div class="row items-center text-grey-6">
        <q-icon name="thumb_up" class="q-mr-xs"/>
        {{ map.up_number }}
      </div>
    </div>
    <div v-if="!simple" class="row text-grey-6 size-14">
      <div class="col row items-center">
        <a-heads class="q-mr-xs" :user="map.add_user" :size="24" dense :editors="map.editors"></a-heads>
      </div>
      <div>{{ timesince(map.update_date) }}</div>
    </div>
    <div v-if="!simple && $q.screen.lt.sm && summary">
      <div class="text-grey-8 size-14" style="word-wrap:break-word">{{ slice(map.summary, 100) }}</div>
    </div>
    <div v-if="!simple && hover" class="box-hover bg-white shadow-10" @mouseleave="setHover(false)">
      <div class="map-box-img">
        <a :href="'/map/'+map.id + '/'" @click.prevent="toMap(map.id)">
          <img itemprop="thumbnail" :src="imgUrl(map.thumbnail)" width="100%" height="auto" :alt="map.name">
        </a>
      </div>
      <div class="q-pa-md">
        <div class="row cursor-pointer">
          <div class="col q-pr-md">
            <a :href="'/map/'+map.id + '/'" @click.prevent="toMap(map.id)">
              <h3 class="text-grey-9 size-18 ellipsis bold">{{ map.name }}</h3>
            </a>
          </div>
          <div class="row items-center text-grey-6">
            <q-icon name="thumb_up" class="q-mr-xs"/>
            {{ map.up_number }}
          </div>
        </div>
        <div class="row text-grey-6 size-14 q-my-sm">
          <div class="col row items-center">
            <a-heads class="q-mr-xs" :user="map.add_user" :size="24" dense :editors="map.editors"></a-heads>
          </div>
          <div>{{ timesince(map.update_date) }}</div>
        </div>
        <div v-if="summary" class="size-16" style="line-height: 1.5em">
          <div style="word-wrap:break-word">{{ slice(map.summary, 54) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import { slice } from '../utils/string'

    export default {
      name: 'aMapImageBox',
      props: {
        map: {
          type: Object,
          required: true
        },
        simple: {
          type: Boolean,
          required: false,
          default: false
        }
      },
      data () {
        return {
          hover: false
        }
      },
      computed: {
        /**
         * 是否显示介绍文字
         * @returns {boolean}
         */
        summary () {
          return this.map.summary && this.map.summary.length > 5
        }
      },
      created () {
        this.$root.$on('mapImageHover', (id) => {
          if (id !== this.map.id) {
            this.hover = false
          }
        })
      },
      methods: {
        imgUrl (url) {
          if (url) {
            return 'https://ageeye-user-image.oss-cn-hangzhou.aliyuncs.com/' + url
          } else {
            return '/statics/thumbnail.jpg'
          }
        },
        setHover (hover = false) {
          if (!this.$q.platform.is.desktop) {
            return
          }
          this.hover = hover

          if (hover) {
            this.$root.$emit('mapImageHover', this.map.id)
          }
        },
        slice (string, length) {
          return slice(string, length)
        },
        toMap (id) {
          let isJtsTopic = false
          const dev = process.env.NODE_ENV === 'development'

          if (dev) {
            if (location.hostname === '127.0.0.1') {
              isJtsTopic = true
            }
          } else {
            const match = location.hostname.match(/(\S+).ageeye.cn/)
            if (match[1] === 'jts') {
              isJtsTopic = true
            }
          }

          if (isJtsTopic) {
            window.open(dev ? `http://localhost:8080/map/${id}/` : `https://www.ageeye.cn/map/${id}/`)
          } else {
            this.$router.push(`/map/${id}/`)
          }
        }
      }
    }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"
  .map-box
    .lock-label
      background #9e9e9e !important
    a
      color #333!important
    .map-box-img
      /*background-position center*/
      /*background-size cover*/
      >a
        display inherit
        height 0
        padding-bottom: 56%
        position relative
      &:hover
        .map-name
          color: $negative!important
    .map-bg
      z-index 0
      background-position center
      background-size cover
      position absolute
      top 0
      left 0
      right 0
      bottom 0
    .map-name:hover
      color: $negative!important
    .box-hover
      position absolute
      top -23px
      left -20px
      right -20px
      z-index 100
</style>
